import React from 'react'
import "./theme.less"
import {Divider, Radio} from "antd";
import bg01 from "../../../../images/login/bg01.jpg"
import bg02 from "../../../../images/login/bg02.jpg"
import bg03 from "../../../../images/login/bg03.jpg"
import bg04 from "../../../../images/login/bg04.jpg"
import bg05 from "../../../../images/login/bg05.jpg"
import bg07 from "../../../../images/login/bg07.jpg"
import useTheme from "../../../../shared/libs/antd-theme"

const images = [
  {cls: 'bg01', img: bg01, color: '#171429'},
  {cls: 'bg02', img: bg02, color: '#001542'},
  {cls: 'bg03', img: bg03, color: '#00001a'},
  {cls: 'bg04', img: bg04, color: '#002b4b'},
  {cls: 'bg05', img: bg05, color: '#231052'},
  {cls: 'bg07', img: bg07, color: '#1A2D29'},
]

const Theme = ({onChange}) => {

  const c1 = ['#ff4d4f',
    '#cd8834',
    '#dba934',
    '#eb2f96']


  const c2 = ['#008e0a',
    '#134eff',
    '#1890ff',
    '#722ed1']

  const {setPrimaryColor, setTheme, setBackground, themeName, getTheme} = useTheme()
  const json = getTheme()
  const {theme} = json && JSON.parse(json) || {}


  return (
    <div className={'body-bg theme-chooser-box'}>
      <h3>颜色</h3>
      <div>
        <div className={'color-chooser'}>
          {c1.map(c => <Item color={c} onClick={() => setPrimaryColor(c)}/>)}
        </div>
        <div className={'color-chooser'}>
          {c2.map(c => <Item color={c} onClick={() => setPrimaryColor(c)}/>)}
        </div>
      </div>

      <Divider/>
      <h3>主题</h3>
      <div className={'theme-chooser'}>
        <Radio.Group onChange={e => {
          if (onChange) onChange(false)
          setTheme(e.target.value)
        }} defaultValue={theme} buttonStyle="solid">
          <Radio.Button value="default">明亮模式</Radio.Button>
          <Radio.Button value="dark">暗色模式</Radio.Button>
        </Radio.Group>
      </div>

      {/*<Divider/>*/}
      {/*<h3>背景</h3>*/}
      {/*<div className={'bg-image-chooser'}>*/}
      {/*	{*/}
      {/*		images.map(i => <div><img alt={''} onClick={() => setBackground(i)} src={i.img}/></div>)*/}
      {/*	}*/}
      {/*</div>*/}

    </div>

  )
}

const Item = ({color, onClick}) => {

  return (
    <div className={'theme-item'}
         onClick={(color) => onClick(color)}
         style={{'backgroundColor': color}}>
    </div>
  )
}

export default Theme